<template>
  <view class="">
    <template v-if="!showForm">
      <div v-if="form.status == '0'" class="page-body">
        <div class="form-box flex-col flex-y-center u-p-t-30 u-p-b-40">
          <div
            class="iconfont icon-clock-fill color-main"
            style="
              width: 130rpx;
              height: 130rpx;
              line-height: 130rpx;
              text-align: center;
              font-size: 150rpx;
            "
          ></div>
          <div class="font-w-600 u-m-t-32 u-font-40">正在审核</div>
          <div class="u-m-t-20 color-999 u-font-30 u-p-b-30">
            正在审核，请耐心等待
          </div>
        </div>

        <div class="back-bt" @click="back">返回</div>
      </div>

      <div v-else-if="form.status == '1'" class="page-body">
        <div class="form-box flex-col flex-y-center u-p-t-30 u-p-b-40">
          <div
            class="iconfont icon-success-fill color-main"
            style="
              width: 130rpx;
              height: 130rpx;
              line-height: 130rpx;
              text-align: center;
              font-size: 150rpx;
            "
          ></div>
          <div class="font-w-600 u-m-t-32 u-font-40">入驻成功</div>
          <div class="u-m-t-20 color-999 u-font-30 u-p-b-30">
            恭喜您，注册成功！
          </div>
        </div>

        <div class="back-bt" @click="showForm = true">返回</div>
      </div>
      <div v-else-if="form.status == '2'" class="page-body">
        <div class="form-box flex-col flex-y-center u-p-t-30 u-p-b-40">
          <div
            class="iconfont icon-reeor-fill color-main"
            style="
              width: 130rpx;
              height: 130rpx;
              line-height: 130rpx;
              text-align: center;
              font-size: 150rpx;
            "
          ></div>
          <div class="font-w-600 u-m-t-32 u-font-40">审核失败</div>
          <div class="u-m-t-20 color-999 u-font-30 u-p-b-30">
            未达到申请条件
          </div>
        </div>

        <div @click="showForm = true" class="back-bt">返回</div>
      </div>
      <div v-else-if="form.status == '4'" class="page-body">
        <div class="form-box flex-col flex-y-center u-p-t-30 u-p-b-40">
          <div
            class="iconfont icon-reeor-fill color-main"
            style="
              width: 130rpx;
              height: 130rpx;
              line-height: 130rpx;
              text-align: center;
              font-size: 150rpx;
            "
          ></div>
          <div class="font-w-600 u-m-t-32 u-font-40">已禁用</div>
          <!-- <div class="u-m-t-20 color-999 u-font-30 u-p-b-30">
            未达到申请条件
          </div> -->
        </div>

        <div @click="back" class="back-bt">返回</div>
      </div>
    </template>

    <view v-else-if="showForm" class="page-body">
      <u-swiper :list="bannerList" height="280"></u-swiper>
      <div class="form-box">
        <u-form
          label-width="180rpx"
          :label-style="{
            fontWeight: '600',
            fontSize: '28rpx'
          }"
          :model="form"
          ref="uForm"
        >
          <u-form-item label="您的姓名" prop="name" required>
            <u-input v-model="form.name" />
          </u-form-item>
          <u-form-item label="手机号码" prop="tel" required>
            <u-input v-model="form.tel" />
          </u-form-item>
          <u-form-item label="验证码" prop="verify_code" required>
            <div class="flex-y-center">
              <div class="flex-w-1">
                <u-input v-model="form.verify_code" maxlength="6" />
              </div>
              <div class="u-m-l-50 color-main" @click="getCode">{{ tips }}</div>
              <u-verification-code
                :seconds="60"
                ref="uCode"
                @change="codeChange"
              ></u-verification-code>
            </div>
          </u-form-item>
          <u-form-item label="性别" prop="gender" required>
            <div class="flex-y-center" @click="showPicker = 'gender'">
              <div class="flex-w-1">
                <text class="" v-if="String(form.gender)">
                  {{ filterItem(form.gender, genderList).name }}
                </text>
                <text class="color-999" v-else>请选择性别</text>
              </div>
              <div class="iconfont icon-arrow-right u-font-22"></div>
            </div>
            <u-picker
              mode="selector"
              :value="showPicker == 'gender'"
              :range="genderList"
              range-key="name"
              @cancel="showPicker = false"
              @confirm="pickerConfirm($event, 'gender')"
            ></u-picker>
          </u-form-item>
          <u-form-item label="服务类目" prop="cat_id" required>
            <div class="flex-y-center" @click="showPicker = 'cat_id'">
              <div class="flex-w-1">
                <text class="" v-if="form.cat_id">
                  {{ filterItem(form.cat_id, cat_list).name }}
                </text>
                <text class="color-999" v-else>请选择服务类目</text>
              </div>
              <div class="iconfont icon-arrow-right u-font-22"></div>
            </div>
            <u-picker
              mode="selector"
              :value="showPicker == 'cat_id'"
              :range="cat_list"
              range-key="name"
              @cancel="showPicker = false"
              @confirm="pickerConfirm($event, 'cat_id')"
            ></u-picker>
          </u-form-item>
          <u-form-item label="年龄" prop="age" required>
            <u-input v-model="form.age" placeholder="请输入真实年龄" />
          </u-form-item>
          <u-form-item label="合作城市" prop="province_id" required>
            <div class="flex-y-center">
              <div class="flex-w-1" @click="showAddressPicker = true">
                <AddressPicker
                  :show.sync="showAddressPicker"
                  :province_id.sync="form.province_id"
                  :district_id.sync="form.district_id"
                  :city_id.sync="form.city_id"
                  @confirm="(e) => getAddress(e.position)"
                ></AddressPicker>
              </div>
              <view @click="getPosition" class="flex-y-center">
                <u-icon name="map-fill"></u-icon>
                <view>{{ $t("my.positioning") }}</view>
              </view>
            </div>
          </u-form-item>
          <u-form-item label="本人近照" prop="logo" required>
            <Upload
              :fileList="form.logo ? [{ url: form.logo }] : []"
              :max="1"
              @success="(e) => (form.logo = e)"
              @remove="(e) => (form.logo = '')"
            ></Upload>
          </u-form-item>
        </u-form>
      </div>
      <div
        v-if="form.form && form.form.list && form.form.list.length"
        class="form-box u-m-t-24"
      >
        <view class="font-w-600 u-p-t-20 u-p-b-20 u-font-30">
          {{ form.form.name }}
        </view>
        <ToolsForm v-if="form.form" :form.sync="form.form"></ToolsForm>
      </div>
      <div v-if="form.status != '1' && form.status != '0'" class="page-bottom">
        <div class="fixed">
          <div @click="submit" class="submit">提交</div>
        </div>
      </div>
    </view>
  </view>
</template>
<script>
import Upload from "@/components/tools/tools-file";
import { regIndex, reg, cateList } from "@/api/service-home";
import AddressPicker from "../components/address-picker";
import ToolsForm from "../components/tools-form";
export default {
  components: {
    Upload,
    AddressPicker,
    ToolsForm
  },
  data() {
    return {
      bannerList: [],
      tips: "获取验证码",
      form: {
        name: "",
        verify_code: "",
        gender: "",
        cat_id: "",
        age: "",
        province_id: "",
        city_id: "",
        district_id: "",
        logo: ""
      },
      cat_list: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            // 可以单个或者同时写两个触发验证方式
            trigger: "blur,change"
          }
        ],
        intro: [
          {
            min: 5,
            message: "简介不能少于5个字",
            trigger: "change"
          }
        ]
      },
      genderList: [
        {
          id: "0",
          name: "女"
        },
        {
          id: "1",
          name: "男"
        }
      ],
      fileList: [],
      showPicker: false,
      showAddressPicker: false,
      showForm: true
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {},
  onLoad() {
    this.loadData();
    this.getCatList();
  },
  onShow() {},
  methods: {
    async getCatList() {
      const res = await cateList({});
      this.cat_list = res.data.list;
    },
    async loadData() {
      const res = await regIndex({}, true);
      this.bannerList = res.data.banner;
      // this.pageData = res.data;
      if (res.worker) {
		  console.log('res',res)
        this.showForm = false;
        this.form = Object.assign(this.form, res.worker);
      } else {
        this.form = Object.assign(this.form, { form: res.data.form_apply });
		console.log('this.form',this.form)
      }
    },
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (!this.$u.test.mobile(this.form.tel))
        return this.$utils.toast("手机号错误");
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码"
        });
        await this.$allrequest.user
          .sms_code({
            phone: this.form.tel,
            code_type: "bind"
          })
          .catch((err) => uni.hideLoading());
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        this.$u.toast("验证码已发送");
        // 通知验证码组件内部开始倒计时
        this.$refs.uCode.start();
      } else {
        this.$u.toast("倒计时结束后再发送");
      }
    },
    pickerConfirm(e, key) {
      switch (key) {
        case "gender":
          this.$set(this.form, key, this.genderList[e[0]].id);
          break;
        case "cat_id":
          this.$set(this.form, key, this.cat_list[e[0]].id);
          break;

        default:
          break;
      }
      this.showPicker = false;
    },
    async getPosition() {
      const apiRes = await this.$store.dispatch("getLocation");
      if (apiRes.longitude) {
        uni.chooseLocation({
          success: (res) => {
            this.form.lng = res.longitude;
            this.form.lat = res.latitude;
            this.getAddress(res.address + res.name);
          },
          fail: () => {
            this.$u.toast(this.$t("my.failPosition"));
          }
        });
      }
    },
    getAddress(address) {
      this.$allrequest.classification
        .addressSmart({
          address
        })
        .then((res) => {
          if (res.code == 0) {
            this.form.province_id = res.data.province_id;
            this.form.city_id = res.data.city_id;
            this.form.district_id = res.data.region_id;
          }
        });
    },
    submit() {
      this.$refs.uForm.validate(async (valid) => {
		  console.log('已提交申请',this.form)
        if (valid) {
          if (!this.form.lat || !this.form.lng)
            return this.$utils.toast("请选择定位信息");

          try {
            await reg(this.form, true);
            this.$utils.showModal("提示", "已提交申请", false, () => {
              uni.navigateBack();
            });
            // this.loadData();
          } catch (error) {
            this.$utils.toast(error);
          }
        }
      });
    },

    back() {
      this.$utils.goBack();
    }
  },
  computed: {
    filterItem(id, list) {
      return function (id, list) {
        if (!list || !list.length) return {};
        return list.find((item) => item.id == String(id));
      };
    }
  },
  watch: {
    showForm(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.uForm.setRules(this.rules);
        });
      }
    }
  },
  onReachBottom() {},
  onPullDownRefresh() {}
};
</script>
<style lang="scss" scoped>
.page-body {
  min-height: 100vh;
  background: #f2f2f2;
  padding-bottom: env(safe-area-inset-bottom);

  .form-box {
    background: #fff;
    padding: 0 30rpx;
  }

  // 上传图片修改样式
  /deep/.listItem > .listBox {
    overflow: initial;
    .icon-reeor {
      top: 0 !important;
      right: 0 !important;
      color: #f0250e;
    }
  }
  .back-bt {
    margin: 80rpx auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 80rpx;
    font-size: 32rpx;
    background: #f0250e;
    border-radius: 100rpx;
    color: #fff;
    font-weight: 600;
  }
  .page-bottom {
    position: relative;
    z-index: 10;
    box-sizing: content-box;
    height: 100rpx;
    padding-bottom: env(safe-area-inset-bottom);
    .fixed {
      box-shadow: 0 -1px 6px 1px #f2f2f2;
      box-sizing: content-box;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100rpx;
      padding: 0 24rpx env(safe-area-inset-bottom);
      background: #fff;

      display: flex;
      align-items: center;
      justify-content: center;

      .submit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        height: 80rpx;
        font-size: 32rpx;
        background: #f0250e;
        border-radius: 100rpx;
        color: #fff;
        font-weight: 600;
      }
    }
  }
}
</style>
